<template>
	<view class="">

		<view class="top">
			<view class="top_rules" @tap="toIntegralRule">积分规则</view>
			<view class="title_one">您当前的积分</view>
			<view class="title_one">
				您当前的积分
				<view class="num">{{user.integral}}</view>
			</view>

			<view class="bottom_choose">
				<view class="choose" @tap="todetail">
					<image :src="Url+'add_images/integral_01.png'"></image>
					积分明细
				</view>
				<view class="choose" @tap="tohistory">
					<image :src="Url+'add_images/integral_02.png'"></image>
					兑换记录
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="product_list">
			<view class="tilte">
				精选超值兑换
			</view>
			<view class="lists" v-if="integralflag">
				<view class="product" v-for="(item,index) in product" @tap="toproduct(item.id)">
					<image :src="item.cover" mode=""></image>
					<view class="product_info">
						<view class="product_info_t">
							<view class="title">
								{{item.name}}
							</view>
							<view class="title2">
								库存{{item.stock}}份
							</view>
						</view>
						<view class="product_info_bottom">
							<view class="product_info_b">
								<text class="integral_num">{{item.price}}</text>积分
							</view>
							<view class="toexchange">
								立即兑换
							</view>
						</view>
					</view>
				</view>
			</view>
			<sc-no v-if="!integralflag" :noStatus="true" @navtive="navtive" url="add_images/no_data.png" nofont="暂无积分商品" width="25%" noTop="40%"></sc-no>
			<uni-load-more :loadingType="loadingType" :contentText="contentText" v-if="integralflag"></uni-load-more>
			<shop-loading v-if="shopLoad"></shop-loading>
			<sc-home></sc-home>
			
		</view>
	</view>
</template>

<script>
	import {
		integral,
		integralGoods
	} from '@/common/integral.js';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import scNo from '@/components/sc-no/sc-no.vue';
	import list from '@/mixins/list.js'
	export default {
		components: {
			uniLoadMore,
			scNo
		},
		data() {
			return {
				Url: this.Imgurl,
				product: [],
				user: {},
				shopLoad: true,
				integralflag:false
				// ifLogin:false
			}
		},
		mixins: [list],
		onShow() {
			if (uni.getStorageSync('mineRefresh')) {
				this.getData()
				// uni.setStorageSync('mineRefresh','false')
				uni.removeStorageSync('mineRefresh');
			}
		},
		methods: {
			navtive(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			getData() {
				this.shopLoad = true;
				console.log(this.page)
				let params = {
					page: this.page,
				}
				integral().then(res => {
					console.log(res)
					if (res.code == 1) {
						var goods = res.msg.goods
						this.user = res.msg.user
						if (goods.data.length) {
							this.product = goods.data
							this.page = goods.current_page
							this.last_page = goods.last_page
							uni.hideLoading();
							uni.stopPullDownRefresh();
							this.integralflag = true
							this.loadingType = goods.last_page > 1 ? 0 : 2;
						}
						this.shopLoad = false;
					} else {
						this.shopLoad = false;
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}


				}).catch()
			},
			getmoreNews() {
				if (this.loadingType !== 0) { //loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中'
				});
				if (this.page == this.last_page) {
					uni.hideLoading();
					uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
				} else {
					this.page++;
					let params = {
						page: this.page
					}
					var that = this
					integralGoods(params).then(res => {
						var itemProduct = res.msg.data
						that.product = that.product.concat(itemProduct)
						this.loadingType = this.page == this.last_page ? 2 : 0
					}).catch()
					uni.hideLoading();

				}
			},
			toIntegralRule() {
				uni.navigateTo({
					url: '/pageA/integral/integralRule'
				})
			},
			tohistory() {
				uni.navigateTo({
					url: '/pageA/integral/changehistory'
				})
			},
			todetail() {
				uni.navigateTo({
					url: '/pageA/integral/integral_detail'
				})
			},
			toproduct(index) {
				console.log(index)
				uni.navigateTo({
					url: '/pageB/classify/productdetail?type=2&id=' + index
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		width: 100%;
		height: 253upx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.userinfo {
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%);
			width: 660upx;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.userinfo_l {
				display: flex;
				align-items: center;

				image {
					width: 84upx;
					height: 84upx;
					margin-right: 20upx;
				}

				text {
					font-size: 28upx;
					color: #FFFFFF;
				}
			}

			.userinfo_r {
				width: 120upx;
				height: 36upx;
				font-size: 24upx;
				color: #FFFFFF;
				background-color: #f96559;
				text-align: center;
				line-height: 36upx;
				border-radius: 8upx;
			}
		}

		.integra_info {
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			bottom: 0;
			width: 660upx;
			height: 148upx;

			image {
				width: 100%;
				height: 100%;
			}

			.integra_info_info {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 30upx;
				box-sizing: border-box;
				width: 100%;
				height: 130upx;

				.info_t {
					margin-top: 25upx;
					font-size: 24upx;
					color: #333333;
				}

				.info_b {
					margin-top: 15upx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.info_b_num {
						font-size: 40upx;
						color: #333333;
						font-weight: bold;
					}

					.info_b_detail {
						font-size: 24upx;
						color: #333333;
					}
				}

				.integral_rule {
					position: absolute;
					right: 0;
					top: 25upx;
					background-color: #333;
					color: #FFFFFF;
					width: 120upx;
					height: 36upx;
					font-size: 24upx;
					text-align: center;
					line-height: 36upx;
					border-top-left-radius: 18upx;
					border-bottom-left-radius: 18upx;
				}
			}
		}
	}

	.active_banner {
		width: 720upx;
		height: 190upx;
		margin: 20upx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top {
		position: relative;
		width: 100%;
		height: 280upx;
		background: url(https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/integral_topbg.png) no-repeat;
		background-size: 100% auto;

		.top_rules {
			position: absolute;
			top: 40upx;
			right: 0;
			font-size: 26upx;
			padding: 8upx 30upx;
			background: rgba(253, 111, 116, 1);
			border-top-left-radius: 25upx;
			border-bottom-left-radius: 25upx;
			color: #fff;

		}

		.title_one {
			position: absolute;
			font-size: 26upx;
			left: 50%;
			top: 15%;
			transform: translate(-50%, 0);
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.num {
				font-size: 66upx;
			}
		}

		.bottom_choose {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;

			.choose {
				width: 50%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				margin: 25upx 0;
				font-size: 30upx;
				color: #fff;
				border-right: 1px solid rgba(245, 245, 245, 0.4);

				// opacity: 0.5;
				image {
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}
			}
		}

	}

	.product_list {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		overflow: hidden;
		padding: 30upx;

		.tilte {
			font-size: 32upx;
			color: #333333;
			margin-bottom: 30upx;
			font-weight: 700;
		}
		.product {
			margin-bottom: 10upx;
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			&:last-child{
				.product_info{
					border: none;
				}
			}
			image {
				width: 210upx;
				height: 210upx;
				margin-right: 25upx;
				border-radius: 10upx;
			}

			.product_info {
				box-sizing: border-box;
				padding-top: 12upx;
				flex: 1;
				height: 240upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-bottom: 2upx solid #F9F9F9;
				padding-bottom: 25upx;

				.product_info_t {

					.title {
						font-size: 30upx;
						height: 40upx;
						width: 450upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						color: #333333;
						line-height: 40upx;
					}

					.title2 {
						margin-top: 15upx;
						font-size: 28upx;
						color: #999;
					}
				}

				.product_info_bottom {
					display: flex;
					justify-content: space-between;

					.product_info_b {
						font-size: 26upx;
						color: #f73e2f;

						.integral_num {
							font-size: 32upx;
							padding-right: 8upx;
						}

						.price {
							margin-left: 20upx;
							color: #999999;
							text-decoration: line-through;
						}
					}

					.toexchange {
						width: 140upx;
						height: 52upx;
						background: linear-gradient(to right, #FD7377 0%, #FF2842 100%);
						border-radius: 26upx;
						font-size: 24upx;
						color: #FFFFFF;
						text-align: center;
						line-height: 52upx;
					}
				}

			}
		}
	}
</style>
